
<?php 
	function size( $size )
	{
		$result = '';
		if ( $size < 1024 )
		{
		 	return $size . ' байт';
		}
		if ( $size >= 1024 )
		{
			return ceil( $size / 1024 ) . ' Кбайт';
		}  
		if ( $size >= 1024*1024 )
		{
			return ceil ( $size / (1024*1024) ) . ' Мбайт';
		}
	}
	$allSongs = $this->allSongs;
	echo "<pre>";
	print_r( $this->file );
?>

<script>

$(document).ready(function(){

	var usePlayList = false;
	var playItem = 0;

	var myPlayList = [
		{name:"MY!",filename:"<?=$this->baseUrl('mus/2.mp3');?>"},
		{name:"Hidden",filename:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3"},
		{name:"Lentement",filename:"http://www.jplayer.org/audio/mp3/Miaow-03-Lentement.mp3"},
		{name:"Lismore",filename:"http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3"},
		{name:"The Separation",filename:"http://www.jplayer.org/audio/mp3/Miaow-05-The-separation.mp3"},
		{name:"Beside Me",filename:"http://www.jplayer.org/audio/mp3/Miaow-06-Beside-me.mp3"},
		{name:"Bubble",filename:"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3"},
		{name:"Stirring of a Fool",filename:"http://www.jplayer.org/audio/mp3/Miaow-08-Stirring-of-a-fool.mp3"},
		{name:"Partir",filename:"http://www.jplayer.org/audio/mp3/Miaow-09-Partir.mp3"},
		{name:"Thin Ice",filename:"http://www.jplayer.org/audio/mp3/Miaow-10-Thin-ice.mp3"}
	];


	$("#jquery_jplayer").jPlayer({
		ready: function() {
			displayPlayList();
			playListEnable(true);
		},
		swfPath: "<?=$this->baseUrl('jquery/js'); ?>"
	});

	$("#jquery_jplayer").jPlayerId("play", "player_play");
	$("#jquery_jplayer").jPlayerId("pause", "player_pause");
	$("#jquery_jplayer").jPlayerId("stop", "player_stop");
	$("#jquery_jplayer").jPlayerId("loadBar", "player_progress_load_bar");
	$("#jquery_jplayer").jPlayerId("playBar", "player_progress_play_bar");
	$("#jquery_jplayer").jPlayerId("volumeMin", "player_volume_min");
	$("#jquery_jplayer").jPlayerId("volumeMax", "player_volume_max");
	$("#jquery_jplayer").jPlayerId("volumeBar", "player_volume_bar");
	$("#jquery_jplayer").jPlayerId("volumeBarValue", "player_volume_bar_value");

	$("#jquery_jplayer").onProgressChange( function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
		var myPlayedTime = new Date(playedTime);
		var ptMin = (myPlayedTime.getMinutes() < 10) ? "0" + myPlayedTime.getMinutes() : myPlayedTime.getMinutes();
		var ptSec = (myPlayedTime.getSeconds() < 10) ? "0" + myPlayedTime.getSeconds() : myPlayedTime.getSeconds();
		$("#play_time").text(ptMin+":"+ptSec);

		var myTotalTime = new Date(totalTime);
		var ttMin = (myTotalTime.getMinutes() < 10) ? "0" + myTotalTime.getMinutes() : myTotalTime.getMinutes();
		var ttSec = (myTotalTime.getSeconds() < 10) ? "0" + myTotalTime.getSeconds() : myTotalTime.getSeconds();
		$("#total_time").text(ttMin+":"+ttSec);
	});

	$("#jquery_jplayer").onSoundComplete(endOfSong);

	$("#ctrl_prev").click( function() {
		playListPrev();
		return false;
	});

	$("#ctrl_next").click( function() {
		playListNext();
		return false;
	});

	function endOfSong() {
		if(usePlayList) {
			playListNext();
		}
	}

	function displayPlayList() {
		for (i=0; i < myPlayList.length; i++) {
			$("#playlist_list ul").append("<li id='playlist_item_"+i+"'>"+ myPlayList[i].name +"</li>");
			$("#playlist_item_"+i).data( "index", i ).hover(
				function() {
					if (playItem != $(this).data("index")) {
						$(this).addClass("playlist_hover");
					}
				},
				function() {
					$(this).removeClass("playlist_hover");
				}
			).click( function() {
				var index = $(this).data("index");
				if (playItem != index) {
					playListChange( index );
				}
			});
		}
	}

	function playListEnable(e) {
		usePlayList = e;
		if(usePlayList) {
			playListChange( playItem );
		} else {
			$("#jquery_jplayer").stop();
			$("#player_playlist_message").text("Playlists disabled");
		}
	}

	function playListChange( index ) {
		$("#playlist_item_"+playItem).removeClass("playlist_current");
		$("#playlist_item_"+index).addClass("playlist_current");
		playItem = index;
		$("#jquery_jplayer").changeAndPlay(myPlayList[playItem].filename);
		// $("#player_playlist_message").text(myPlayList[playItem].name);
	}

	function playListNext() {
		if(usePlayList) {
			var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
			playListChange( index );
		}
	}

	function playListPrev() {
		if(usePlayList) {
			var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
			playListChange( index );
		}
	}
});

</script>

<style>
#player_container {
	position: relative;
	background-color:#eee;
	width:418px;
	height:80px;
	border:1px solid #009be3;
}
#player_container  ul#player_controls {
	list-style-type:none;
	padding:0;
	margin: 0;
}
#player_container  ul#player_controls li {
	overflow:hidden;
	text-indent:-9999px;
}
#player_play,
#player_pause {
	display: block;
	position: absolute;
	left:48px;
	top:20px;
	width:40px;
	height:40px;
	cursor: pointer;
}
#player_play {
	background: url("<?=$this->baseUrl('img/spirites.png')?>") 0 0 no-repeat;
}
#player_play.jqjp_hover {
	background: url("<?=$this->baseUrl('img/spirites.png')?>") -41px 0 no-repeat;
}
#player_pause {
	background: url("<?=$this->baseUrl('img/spirites.png')?>") 0 -42px no-repeat;
}
#player_pause.jqjp_hover {
	background: url("<?=$this->baseUrl('img/spirites.png')?>") -41px -42px no-repeat;
}
 
#ctrl_prev {
	position: absolute;
	left:20px;
	top:26px;
	background: url("<?=$this->baseUrl('img/spirites.png')?>") 0 -112px no-repeat;
	width:28px;
	height:28px;
	cursor: pointer;
}
 
#ctrl_prev:hover {
	background: url("<?=$this->baseUrl('img/spirites.png')?>") -29px -112px no-repeat;
}
 
#ctrl_prev.disabled {
	background: url("<?=$this->baseUrl('img/spirites.png')?>") -58px -112px no-repeat;
	cursor:default;
}
 
#ctrl_next {
	position: absolute;
	left:88px;
	top:26px;
	background: url("<?=$this->baseUrl('img/spirites.png')?>") 0 -141px no-repeat;
	width:28px;
	height:28px;
	cursor: pointer;
}
 
#ctrl_next:hover {
	background: url("<?=$this->baseUrl('img/spirites.png')?>") -29px -141px no-repeat;
}
 
#ctrl_next.disabled {
	background: url("<?=$this->baseUrl('img/spirites.png')?>") -58px -141px no-repeat;
	cursor:default;
}

 
#player_stop {
	position: absolute;
	left:126px;
	top:26px;
	background: url("<?=$this->baseUrl('img/spirites.png')?>") 0 -83px no-repeat;
	width:28px;
	height:28px;
	cursor: pointer;
} 
#player_stop.jqjp_hover {
	background: url("<?=$this->baseUrl('img/spirites.png')?>") -29px -83px no-repeat;
} 
#player_progress {
	position: absolute;
	left:164px;
	top:32px;
	background-color: #eee;
	width:122px;
	height:15px;
} 
#player_progress_load_bar {
	background: url("<?=$this->baseUrl('img/bar_load.gif');?>")  top left repeat-x;
	width:0px;
position: absolute;
	height:15px;
	cursor: pointer;
} 
#player_progress_load_bar.jqjp_buffer {
	 background: url("<?=$this->baseUrl('img/bar_buffer.gif');?>")  top left repeat-x;
} 
#player_progress_play_bar {
	background: url("<?=$this->baseUrl('img/bar_play.gif');?>") top left repeat-x ;
	width:0px;
	height:15px;
} 
#player_volume_min {
	position: absolute;
	left:296px;
	top:32px;
	background: url("<?=$this->baseUrl('img/spirites.png')?>") 0 -170px no-repeat;
	width:18px;
	height:15px;
	cursor: pointer;
} 

#player_volume_max {
	position: absolute;
	left:368px;
	top:32px;
	background: url("<?=$this->baseUrl('img/spirites.png')?>") 0 -186px no-repeat;
	width:18px;
	height:15px;
	cursor: pointer;
}
 
#player_volume_min.jqjp_hover {
	background: url("<?=$this->baseUrl('img/spirites.png')?>") -19px -170px no-repeat;
} 

#player_volume_max.jqjp_hover {
	background: url("<?=$this->baseUrl('img/spirites.png')?>") -19px -186px no-repeat;
} 
 
#player_volume_bar {
	position: absolute;
	left:314px;
	top:37px;
	background: url("<?=$this->baseUrl('img/volume_bar.gif');?>") repeat-x top left;
	width:46px;
	height:5px;
	cursor: pointer;
} 
#player_volume_bar_value {
	background: url("<?=$this->baseUrl('img/volume_bar_value.gif')?>") repeat-x top left;
	width:0px;
	height:5px;
}
 
#play_time,
#total_time {
	position: absolute;
	left:164px;
	top:49px;
	width:122px;
	font-size:.8em;
	font-style:oblique;
}

#total_time {
	text-align: right;
}

#playlist_list {
	width:418px;
}

#playlist_list ul{
	list-style-type:none;
	padding:10px 20px 20px 20px;
	margin:0 0 10px 0;
	background-color:#ccc;
	border:1px solid #009be3;
	border-top:none;
	width:378px;
	font-size:.9em;
}
  
#playlist_list li{
	padding:4px 0 4px 20px;
	border-bottom:1px solid #eee;
	cursor: pointer;
}

#playlist_list li.playlist_current{
	color:#0d88c1;
	list-style-type:square;
	list-style-position:inside;
	padding-left:6px;
	cursor: default;
}

#playlist_list li.playlist_hover {
	color:#0d88c1;
}

.miaow {
	font-size:.8em;
	color:#999;
} 

.miaow a:link, a:visited, a:hover, a:focus, a:active {
	color:#009be3;
}

</style>
<div style="line-height: 0px;">
<div id="jquery_jplayer">
</div>
<div id="player_container">
	<ul id="player_controls">
		<li id="player_play"><a href="#" onClick="$('#jquery_jplayer').play(); return false;" title="play"><span>play</span></a></li>
		<li id="player_pause"><a href="#" onClick="$('#jquery_jplayer').pause(); return false;" title="pause"><span>pause</span></a></li>
		<li id="player_stop"><a href="#" onClick="$('#jquery_jplayer').stop(); return false;" title="stop"><span>stop</span></a></li>
		<li id="player_volume_min"><a href="#" onClick="$('#jquery_jplayer').volume(0); return false;" title="min volume"><span>min volume</span></a></li>
		<li id="player_volume_max"><a href="#" onClick="$('#jquery_jplayer').volume(100); return false;" title="max volume"><span>max volume</span></a></li>

		<li id="ctrl_prev"><a href="#" onclick="playListPrev(); return false;" title="previous track"><span>previous</span></a></li>
		<li id="ctrl_next"><a href="#" onclick="playListPrev(); return false;" title="next track"><span>next</span></a></li>
	</ul>
	<div id="play_time"></div>
	<div id="total_time"></div>
	<div id="player_progress">
		<div id="player_progress_load_bar">
			<div id="player_progress_play_bar"></div>

		</div>
	</div>
	<div id="player_volume_bar">
		<div id="player_volume_bar_value"></div>
	</div>
</div>

<div id="playlist_list">
	<ul>
		<!-- The function displayPlayList() uses this unordered list -->

	</ul>
</div>

</div>
  